<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Install 安装向导</title>
    <link href="static/css/bootstrap-icons.css" rel="stylesheet">
    <link href="static/css/bootstrap.min.css" rel="stylesheet">
    <link href="static/css/vui365.css" rel="stylesheet">
    <style>
        html {
            color: #333;
            font-size: 14px;
        }

        h4 {
            font-size: 18px;
            margin: 15px 0;
        }

        table td:first-child {
            text-align: right;
        }

        table td:nth-child(3) {
            color: #9A9A9A !important
        }
    </style>
</head>

<body>
    <div id="app" class="d-flex flex-column">
        <header>
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
                <div class="container-fluid">
                    <a class="navbar-brand" href="#">Admin 安装向导</a>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                </div>
            </nav>
        </header>
        <main class="flex-grow-1 border-top border-bottom border-primary border-2 px-3">
            <div class="my-1" style="height:calc(100vh - 125px); overflow-y: auto;">
                <div>
                    <h4>填写数据库信息</h4>
                    <table>
                        <tbody>
                            <tr>
                                <td>服务器：</td>
                                <td><input type="search" class="form-control form-control-sm" v-model="dbcfg.host"></td>
                                <td>数据库服务器地址, 一般为 localhost</td>
                            </tr>
                            <tr>
                                <td>端口号：</td>
                                <td><input type="search" class="form-control form-control-sm" v-model="dbcfg.port"></td>
                                <td>数据库端口号, 一般为 3306</td>
                            </tr>
                            <tr>
                                <td>数据库名称：</td>
                                <td><input type="search" class="form-control form-control-sm" v-model="dbcfg.database">
                                </td>
                                <td>数据库的名称，如果没有请先手动创建</td>
                            </tr>
                            <tr>
                                <td>用户名：</td>
                                <td><input type="search" class="form-control form-control-sm" v-model="dbcfg.user"></td>
                                <td>&nbsp;</td>
                            </tr>
                            <tr>
                                <td>密码：</td>
                                <td><input type="password" class="form-control form-control-sm"
                                        v-model="dbcfg.password"></td>
                                <td>&nbsp;</td>
                            </tr>
                        </tbody>
                    </table>
                    <h4>填写管理员信息</h4>
                    <table>
                        <tbody>
                            <tr>
                                <td>管理员账号：</td>
                                <td><input type="search" class="form-control form-control-sm"
                                        v-model="admincfg.account"></td>
                                <td>6-10个字符，只限英文字母和下划线，不能包含中文、其它字符等</td>
                            </tr>
                            <tr>
                                <td>管理员密码：</td>
                                <td><input type="password" class="form-control form-control-sm"
                                        v-model="admincfg.password"></td>
                                <td>8-16个字符，只限英文字母和下划线、@符号、#符号，不能包含中文和其它字符</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </main>
        <footer class="d-flex justify-content-between my-3 px-3">
            <div class="copyright mt-2">© 2021 <a href="https://gitee.com/sochishun/lvadmin" target="_blank"
                    class="text-reset">LvAdmin</a></div>
            <div>
                <a class="btn btn-outline-secondary me-2" href="index.html">返回</a>
                <a class="btn btn-primary" href="finish.html" @click.prevent="onInstall()">开始安装</a>
            </div>
        </footer>
    </div>
    <script src="static/js/bootstrap.bundle.min.js"></script>
    <script src="static/js/vue.global.prod.min.js"></script>
    <script src="static/js/axios.min.js"></script>
    <script src="static/js/vui365.js"></script>
    <script>
        // 应用配置
        const App = {
            data() {
                return {
                    dbcfg: {
                        host: 'localhost',
                        port: '3306',
                        user: 'root',
                        password: '',
                    },
                    admincfg: {
                        account: 'admin',
                        password: '',
                    }
                }
            },
            methods: {
                initView() {
                    // 移除骨架屏
                    document.querySelectorAll('.skeleton').forEach(el => {
                        el.classList.remove("skeleton");
                    })
                },
                async onInstall() {
                    window.sessionStorage.setItem("dbcfg",JSON.stringify(this.dbcfg));
                    window.sessionStorage.setItem("admincfg",JSON.stringify(this.admincfg));
                    const result=await axios({
                        url:'api/api.php?action=install'
                    })
                    console.log('result=',result);
                }
            },
            mounted() {
                this.initView();
            }
        }
        // 创建应用实例
        const app = Vue.createApp(App)
        const vm = app.mount('#app')
    </script>
</body>

</html>